<template>
	<view class="order-recharge-popup">
		<comMask v-model="isShowOrderUppop">
			<view class="reward-order-packbox font-hanserif-bold">
				<comPopup v-model="isShowOrderUppop" title="购买详情" popupOfMaxHeight="1352rpx" backgroundSize="100% 100%">
					<view class="order-reward-info relative flex-align-items-center flex-wrap margin-auto">
						<!-- <image v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
							:src="`${commonConfigs.domainFrontFileLink}/files/images/common/box-list-item-bg.png`" 
							class="bg" mode=""></image> -->
						<view class="reward-info-img flex-all-center relative">
							<image class="bg"
								:src="commonConfigs.domainFrontFileLink + '/files/images/welfareHouse/goods-bg.png'"
								mode=""></image>
							<image class="reward-info-cover" v-if="rewardData.cover" :src="rewardData.cover" mode="heightFix"></image>
						</view>
						
						<view class="reward-info-count relative truncate">
							<view class="info-name truncate"> {{ rewardData.name }} </view>
							
							<view class="info-price" v-if="poolTypeSence === 'integral'"> 价值：<text style="color: #63FFF7;">{{ rewardData.reward_price_1 || rewardData.price }}</text> 积分</view>
							<view class="info-price" v-else> 价值：<text style="color: #63FFF7;">¥{{ rewardData.reward_price_1 || rewardData.price }}</text> </view>
							
							<view class="info-nums">数量：<text style="color: #63FFF7;">{{ rewardData.num || 1 }}</text> </view>
						</view>
					</view>
					
					<view class="relative order-reward-sums">
						<view class="order-reward-bor">
							<view class="reward-sums-txt relative" v-if="poolTypeSence === 'integral'"> 总计：<text style="color: #63FFF7;">{{ rewardData.price }}</text> 积分</view>
							<view class="reward-sums-txt relative" v-else> 总计：<text style="color: #63FFF7;">¥{{ rewardData.price }}</text> </view>
						</view>
					</view>
					
					<!-- 支付方式：积分支付 -->
					<view class="order-pay-type order-pay-box" v-if="poolTypeSence === 'integral'">
						<view class="pay-type-info">
							<label :class="['pay-type-txt flex disabled']">
								<image class="pay-type-select" src="/static/images/public_imgs/selecting.png" mode=""></image>
								<view class="flex"> 使用积分抵扣 </view>
								<view>（剩余：{{ rewardData.points }}）</view>
							</label>
						</view>
					</view>
					
					<!-- 支付方式：组合支付顺序（飞机币 - 优惠券 - 机能） -->
					<view class="order-pay-type order-pay-box" v-if="!isChallengeSence && ['integral', 'newerSence'].indexOf(poolTypeSence) === -1">
						<view class="order-pay-tips">
							<text style="margin-right: 6rpx;">组合支付方式</text>
							<!-- #ifdef MP-WEIXIN -->
							<text v-if="rewardData.show_recovery" style="margin-left: 12rpx;font-size: 26rpx;color: #63FFF7;">(提示：1元 = 1机能 = 1飞机币)</text>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS -->
							<text style="margin-left: 12rpx;font-size: 26rpx;color: #63FFF7;">(提示：1元 = 1机能 = 1飞机币)</text>
							<!-- #endif -->
						</view>
						<view class="pay-type-info">
							<!-- #ifdef MP-WEIXIN -->
							<label v-if="rewardData.show_recovery" :class="['pay-type-txt flex flex-justify-content-between', setDisableSelectFun(rewardData.currency_num)]" @click="setPayTypeFun(1)">
								<view class="flex">
									<image class="pay-type-select" :src="setSelectPayTypeFun(1) ? '/static/images/public_imgs/selecting.png' : '/static/images/public_imgs/select.png'" mode=""></image>
									<view class="flex"> 使用旺卡币抵扣 </view>
									<view class=""> （剩余：{{ rewardData.currency_num }}） </view>
								</view>
								
								<view class="flex" >
									<view style="font-size: 26rpx; color: #FFFFFF">
										<text style="font-size: 22rpx;">-¥ </text>
										<text>{{ rewardData.deduct_currency_num_rmb }}</text>
									</view>
									<image class="send-info-right-icon" src="/static/images/public_imgs/right-item-icon.png" mode=""></image>
								</view>
							</label>
							
							<label v-if="rewardData.show_recovery" :class="['pay-type-txt flex flex-justify-content-between', setDisableSelectFun(rewardData.balance)]" @click="setPayTypeFun(2)">
								<view class="flex">
									<image class="pay-type-select" :src="setSelectPayTypeFun(2) ? '/static/images/public_imgs/selecting.png' : '/static/images/public_imgs/select.png'" mode=""></image>
									<view class="flex"> 使用机能抵扣 </view>
									<view class=""> （剩余：{{ rewardData.balance }}） </view>
								</view>
								
								<view class="flex" >
									<view class="" style="font-size: 26rpx; color: #63FFF7">
										<text style="font-size: 22rpx;">-¥ </text>
										<text>{{ rewardData.deduct_balance_rmb }}</text>
									</view>
									<image class="send-info-right-icon" src="/static/images/public_imgs/right-item-icon.png" mode=""></image>
								</view>
							</label>
							<!-- #endif -->
							
							<!-- #ifdef APP-PLUS -->
							<label :class="['pay-type-txt flex-justify-content-between', setDisableSelectFun(rewardData.currency_num)]" @click="setPayTypeFun(1)">
								<view class="flex">
									<image class="pay-type-select" :src="setSelectPayTypeFun(1) ? '/static/images/public_imgs/selecting.png' : '/static/images/public_imgs/select.png'" mode=""></image>
									<view class="flex"> 使用旺卡币抵扣 </view>
									<view class=""> （剩余：{{ rewardData.currency_num }}） </view>
								</view>
								
								<view class="flex" >
									<view class="" style="font-size: 26rpx; color: #63FFF7">
										<text style="font-size: 22rpx;">-¥ </text>
										<text>{{ rewardData.deduct_currency_num_rmb }}</text>
									</view>
									<image class="send-info-right-icon" src="/static/images/public_imgs/right-item-icon.png" mode=""></image>
								</view>
							</label>
							
							<label :class="['pay-type-txt flex-justify-content-between', setDisableSelectFun(rewardData.balance)]" @click="setPayTypeFun(2)">
								<view class="flex">
									<image class="pay-type-select" :src="setSelectPayTypeFun(2) ? '/static/images/public_imgs/selecting.png' : '/static/images/public_imgs/select.png'" mode=""></image>
									<view class="flex"> 使用机能抵扣 </view>
									<view> （剩余：{{ rewardData.balance }}） </view>
								</view>
								
								<view class="flex" >
									<view style="font-size: 26rpx; color: #63FFF7">
										<text style="font-size: 22rpx;">-¥ </text>
										<text>{{ rewardData.deduct_balance_rmb }}</text>
									</view>
									<image class="send-info-right-icon" src="/static/images/public_imgs/right-item-icon.png" mode=""></image>
								</view>
							</label>
							<!-- #endif -->
							
							<label :class="['pay-type-txt flex flex-justify-content-between']">
								<view class="flex" @click="setPayTypeFun(3)">
									<image class="pay-type-select" :src="setSelectPayTypeFun(3) ? '/static/images/public_imgs/selecting.png' : '/static/images/public_imgs/select.png'" mode=""></image>
									<text>使用优惠券</text>
								</view>
								<view class="flex" @click="setUseCouponFun">
									<text v-if="couponSelectId" style="color: #63FFF7">
										<text style="font-size: 22rpx;">-¥ </text>
										<text>{{ couponDiscount }}</text>
										<!-- <text style="color: #FFF;">({{ couponSelectName }})</text> -->
									</text>
									<text v-else style="color: #FFFFFF;">暂无优惠券</text>
									<image class="send-info-right-icon" src="/static/images/public_imgs/right-item-icon.png" mode=""></image>
								</view>
							</label>
							
							<label v-if="rewardData.infinite_schedule_double_num" :class="['pay-type-txt flex-justify-content-between', setDisableSelectFun(rewardData.infinite_schedule_double_num)]" @click="setPayTypeFun(4)">
								<view class="flex">
									<image class="pay-type-select" :src="setSelectPayTypeFun(4) ? '/static/images/public_imgs/selecting.png' : '/static/images/public_imgs/select.png'" mode=""></image>
									<view class="flex"> 使用双倍球 </view>
									<view> （剩余：{{ rewardData.infinite_schedule_double_num }}） </view>
								</view>
								
								<view class="flex" >
									<view v-if="commonPaySortList.includes(4)" style="font-size: 26rpx; color: #63FFF7">
										<text style="font-size: 22rpx;">- </text>
										<text>1</text>
									</view>
									<view v-else style="font-size: 26rpx; color: #63FFF7">
										<text>0</text>
									</view>
									<image class="send-info-right-icon" src="/static/images/public_imgs/right-item-icon.png" mode=""></image>
								</view>
							</label>
						</view>
					</view>
					
					<view class="all-price-box flex flex-end" v-if="!isChallengeSence && ['integral', 'newerSence'].indexOf(poolTypeSence) === -1">
						<view style="margin-right: 36rpx;">购买<text style="color: #63FFF7">{{ rewardData.reward_num }}</text>张</view>
						<view>
							<text>实际支付：</text>
							<text style="color: #63FFF7"><text style="font-size: 22rpx;">¥ </text>{{ rewardData.allPrice }}</text>
						</view>
					</view>
					
					<view class="all-price-box flex flex-end" v-if="['newerSence'].indexOf(poolTypeSence) !== -1">
						<view style="margin-right: 36rpx;">购买<text style="color: #63FFF7">{{ rewardData.reward_num }}</text>张</view>
						<view>
							<text>实际支付：</text>
							<text style="color: #63FFF7"><text style="font-size: 22rpx;">¥ </text>{{ rewardData.allPrice }}</text>
						</view>
					</view>
		
					<!-- 选择支付方式 -->
					<comPayType v-if="poolTypeSence !== 'integral' && isShowOrderUppop" v-model="currentPayType" :fromSence="poolTypeSence" ></comPayType>
		
					<view class="order-pay-box">
						<comUserAgreement v-if="isShowOrderUppop" v-model="isShowAgreement" :fromUseSence="fromUseSence" :isShowOrderAgreeUppop="rewardData.is_view_pay_agreement"></comUserAgreement>
					</view>
		
					<view class="relative" style="margin-top: 32rpx; width: 100%; height: 1rpx; background: #CCC; opacity: 0.45;"> </view>
		
					<template #footer>
						<view :class="[ticketNums && isChallengeSence ? 'flex-justify-content-between' : 'flex-end']" style="width: 100%;">
							<view v-if="ticketNums && isChallengeSence" style="color: #fff;font-size: 26rpx;">
								<view>当前票数：<text style="color: #FF8B1D;">{{ ticketNums }}张</text></view>
								<view>需要消耗闯关票：<text style="color: #F30E16;">{{ rewardBtnNum }}张</text></view>
							</view>
							<view class="flex-end flex-align-items-center" style="padding: 0rpx 0 38rpx">
								<comSubmitBtn @click="setPayOrderFun"> 确认购买 </comSubmitBtn>
							</view>
						</view>
					</template>
				</comPopup>
				
				<view class="fixed" 
					style="top: 0;right: 0;bottom: 0;left: 0;z-index: 1000000;"
					v-if="isShowCouponUppop">
					<comMask v-model="isShowCouponUppop">
						<comOrderCoupon 
						v-model="isShowCouponUppop" 
						:currentCouponId="couponSelectId" 
						:couponData="rewardData.couponResult && rewardData.couponResult.list" 
						@setCouponInfoFun="setCouponInfoFun"></comOrderCoupon>
					</comMask>
				</view>
				
				<comPromptPopup
					v-model="isShowBallPrompt" 
					title="使用双倍球"
					cancelText="重新选择"
					confirmText="确定" 
					@setSureFun="setSureFun">
					<template>
						<!-- <view style="text-align: center;">{{ ballPromptTxt }}</view> -->
						您已勾选组合支付方式中的双倍球，
						当前为 <text style="color: #FF8B1D;">{{ rewardBtnNum }}</text> 抽，
						<text v-if="!isMaxRewardNum" style="color: #F30E16;">不是最高抽，</text>
						是否确定使用？
					</template>
				</comPromptPopup>
			</view>
		</comMask>
		<!-- #ifdef APP-PLUS -->
		<comRecharge ref="comRecharge"></comRecharge>
		<!-- #endif -->
	</view>
</template>

<script>
	import store from '@/store';
	import { ACTIONS } from '@/store/modules/userStore';
	import { setAsyncFunWait } from '@/setupproject/TOOLS_FUN';
	
	export default {
		name: 'comRewardOrder',
		props: {
			rewardData: {
				type: Object,
				default: () => {}
			},
			// 赏池类型: 默认普通池, integral 积分池，newerSence 新人专区, challengeSence 闯关
			poolTypeSence: {
				type: String,
				default: () => ''
			},
			value: {
				type: Boolean,
				default: () => true
			},
			isMaxRewardNum: {
				type: Boolean,
				default: () => false
			},
			rewardBtnNum: {
				type: String | Number,
				default: () => ''
			},
			ticketNums: {
				type: Number,
				default: () => 0
			},
			// 使用场景类型: infiniteRewardSence 飞机赏抽赏场景
			fromUseSence: {
				type: String,
				default: () => ''
			},
			// 是否：是闯关场景 & 需要闯关票的关卡（第一关不需要闯关票）
			isChallengeSence: {
				type: Boolean,
				default: () => false
			},
		},
		data() {
			return {
				couponDiscount: 0,
				couponSelectId: '',
				couponSelectName: '',
				isShowCouponUppop: false,
				isShowAgreement: false,
				// 选择充值方式
				currentPayType: '',
				apiPayTypeVal: 2,
				// 监听返回当前平台时触发支付结果事件
				payBeInfos: {
					isPayBackSence: false,
					type: null,
					order_num: null,
					payBeScene: ''
				},
				
				isShowBallPrompt: false,
				ballPromptTxt: '您已勾选组合支付方式中的双倍球，是否确定使用？',
			};
		},
		computed: {
			isShowOrderUppop: {
				get() {
					return this.value;
				},
				set(v) {
					this.$emit('input', v);
				}
			},
			commonPaySortList() {
				return store.getters.commonPaySortList;
			},
			commonConfigs() {
				return store.getters.commonConfigs || {};
			},
		},
		watch: {
			async value(v) {
				if(v){
					this.setCouponDefaultFun();
					if (!this.rewardData.is_view_pay_agreement) return this.setAgreeFun();
				}
			},
			currentPayType(v) {
				this.setCurrentPaysFun(v);
			}
		},
		methods: {
			setSureFun() {
				this.isShowBallPrompt = false;
				this.$emit('setPayOrderFun');
			},
			
			setUseCouponFun() {
				if(this.rewardData.couponResult && this.rewardData.couponResult.list && this.rewardData.couponResult.list.length){
					this.isShowCouponUppop = true;
				}
			},
			
			setCouponInfoFun(e) {
				this.couponSelectName = e.couponSelectName || '';
				this.couponSelectId = e.couponSelectId || '';
				this.couponDiscount = e.couponDiscount || '';
				
				this.$emit('setSelectCouponFun', this.couponSelectId);
			},
			
			setPayOrderFun() {
				if (!this.isShowAgreement) {
					return uni.showToast({
						title: '须同意《购买协议》、《隐私条款》才能支付',
						icon: 'none'
					});
				}
				
				if(this.rewardData.infinite_schedule_double_num && this.commonPaySortList.indexOf(4) !== -1) {
					this.isShowBallPrompt = true;
				}else{
					this.$emit('setPayOrderFun');
				}
			},
			
			setDisableSelectFun(num) {
				if (parseFloat(num) > 0) {
					return '';
				}
				return 'disabled';
			},
			
			// 获取pay-type组件的选择值
			async setCurrentPaysFun(v) {
				this.$emit('setCurrentPaysFun', v);
			},
			
			setAgreeFun() {
				this.$emit('setAgreeFun')
			},
			
			// value：1飞机币 - 2机能 - 3优惠券 
			async setPayTypeFun(value) {
				const index = this.commonPaySortList.indexOf(value);
				
				if (index > -1) {
					this.commonPaySortList.splice(index, 1);
				} else {
					this.commonPaySortList.push(value);
				}

				store.commit('CHECK_LIST_SET_FUN', this.commonPaySortList);
				
				await this.$emit('setNextOrderFun');
				
				await setAsyncFunWait(100);
				
				if(!this.setSelectPayTypeFun(3)){
					this.couponSelectName = '';
					this.couponSelectId = '';
					this.couponDiscount = 0;
				}else{
					this.setCouponDefaultFun();
				}
			},
			
			setCouponDefaultFun() {
				if(this.rewardData.couponResult && this.rewardData.couponResult.list && this.rewardData.couponResult.list.length){
					this.couponSelectName = this.rewardData.couponResult.list[0].subtitile || '';
					this.couponSelectId = this.rewardData.couponResult.list[0].id || '';
					this.couponDiscount = this.rewardData.couponResult.list[0].discount || '';
					
					this.$emit('setSelectCouponFun', this.couponSelectId);
				}else{
					this.couponSelectName = '';
					this.couponSelectId = '';
					this.couponDiscount = 0;
				}
			},
			
			setSelectPayTypeFun(value) {
				return this.commonPaySortList.includes(value);
			},
			
		}
	};
</script>

<style scoped lang="scss">
	.reward-order-packbox {
		width: 100vw;
		height: 100vh;
		
		.order-reward-info {
			padding: 0rpx 22rpx 0 36rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			width: 710rpx;
			height: 210rpx;
		
			.reward-info-img {
				width: 138rpx;
				height: 138rpx;
				margin-right: 24rpx;
		
				.reward-info-cover {
					max-width: 96rpx;
					height: 96rpx;
				}
			}
		
			.reward-info-count {
				width: 450rpx;
		
				.info-name {
					font-size: 32rpx;
				}
		
				.info-price {
					margin-top: 18rpx;
				}
		
				.info-nums {
					margin-top: 8rpx;
				}
			}
		
		}
		
		.order-reward-sums {
			color: #FFFFFF;
			padding: 0rpx 35rpx 0rpx 20rpx;
			font-size: 32rpx;
			.order-reward-bor {
				padding: 20rpx 0rpx 20rpx 0rpx;
			}
			.reward-sums-txt {
				text-align: right;
				width: 100%;
			}
			
		}
		
		.order-pay-type {
			color: #FFFFFF;
			font-size: 30rpx;
			margin-top: 28rpx;
			padding: 20rpx 0;
		
			.order-pay-tips {
				margin-bottom: 28rpx;
				font-size: 34rpx;
			}
			
			.pay-type-info {
				.pay-type-txt {
					white-space: nowrap;
					margin-bottom: 18rpx;
					line-height: 26rpx;
					.pay-type-select {
						width: 28rpx;
						height: 28rpx;
						margin-right: 12rpx;
					}

					.send-info-right-icon {
						margin-left: 16rpx;
						width: 14rpx;
						height: 24rpx;
					}
				}
			}
		}
		
		.all-price-box {
			margin: 0 28rpx 28rpx;
			padding-bottom: 28rpx;
			padding-top: 28rpx;
			font-size: 28rpx; 
			color: #FFFFFF; 
		}
		
		.order-pay-box {
			margin: 0 28rpx;
		}
		
	}

	
</style>
